<template>
  <el-row>
    <el-col class="list_home_module" :span="6" v-for="item in list" :key="item"  @click="junpTo(item)">
      <!--列表自定义模块glist @click="junpTo(item)"-->
      <div class="modules">
        <div class="modules_img" v-if='imgflag'> 
          <img src="../../assets/images/loginBg.png" />
          <div class="action_bar">
            <el-row :gutter="20">
              <el-col :span="6"
                ><span class="record_creator action_btn">
                  <el-icon><Pointer /></el-icon>{{ item.praise_len }}</span
                ></el-col
              >
              <el-col :span="6"
                ><span class="record_creator action_btn"
                  ><el-icon><StarFilled /></el-icon> {{ item.praise_len }}</span
                ></el-col
              >
              <el-col :span="6"
                ><span class="record_creator action_btn"
                  ><el-icon><Management /></el-icon> {{ item.hits }}</span
                ></el-col
              >
              <el-col :span="6"
                ><span class="record_creator action_btn"
                  ><el-icon><Reading /></el-icon> {{ item.hits }}</span
                ></el-col
              >
            </el-row>
          </div>
        </div>
        <div class="modules_content">
          <div class="modules_title">
            <p class="mx-1">字段名1：XXX</p>
            <p class="mx-1">字段名2：XXX</p>
            <p class="mx-1">字段名3：XXX</p>
            <p class="mx-1">字段名4：XXX</p>
            <p class="mx-1">字段名5：XXX</p>
          </div>
          <div class="desc_btn">
            <el-button type="primary" round>详情</el-button>
            <el-button type="primary" round>删除</el-button>
            <el-button type="primary" round>其它按钮</el-button>
            <!-- <el-button type="primary" round>跨表4</el-button> -->
          </div>
          <div class="desc_btn">
            <el-button type="primary"   round @click="get_praise(item)"
              >详情</el-button
            >
            <el-button type="primary" round @click="check_collect(item)"
              >删除</el-button
            >
            <el-button type="primary" round @click="check_collect(item)"
              >其它按钮</el-button
            >
            <!-- <el-tooltip placement="top" effect="light">
              <template #content>
                <el-rate
                  v-model="rateValue"
                  allow-half
                  @change="add_Rate(item)"
              /></template>
              <el-button type="primary" round>评分</el-button>
            </el-tooltip> -->
            <!-- <el-button type="primary" round>分享</el-button> -->
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, toRefs, computed, onMounted } from "vue";
import {
  Pointer,
  StarFilled,
  CollectionTag,
  Reading,
  Management,
  Share,
  Search,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { paramsFun, $getUrlParams, $check_exam } from "@/utils/utils.js";
import storageHelper from "@/libs/StorageHelper";
import { $post, $get } from "@/api/Api.js";
let UserInfo = storageHelper.getUserInfo();
let router = useRouter();
const props = defineProps({
  imgflag: {
    type: Boolean,
    default: true,
  },
  list: {
    type: Array,
    default() {
      return [];
    },
  },
  vm: {
    type: Object,
    default() {
      return {
        img: "img",
        article_id: "article_id",
        title: "title",
        description: "description",
        create_time: "create_time",
        content: "content",
        praise_len: "praise_len",
        hits: "hits",
      };
    },
  },
});
let { list, isSell, vm, imgHeight, spanNum, title } = toRefs(props); //list
let check_collected = ref(false); // 是否已收藏
let check_praised = ref(false); // 是否已点赞
let rateValue = ref(""); // 评分
let user_id = UserInfo.user_id;
//点击更多
let junpTo = (o) => {
  router.push({
    path: "/custom_module/details",
    query: { article_id: o.article_id },
  });
};
/**
 * 获取点赞
 */
let get_praise = (obj) => {
  console.log(obj.article_id);
  $get(
    "/api/praise/count?" +
      paramsFun(
        {
          source_table: "article",
          source_field: "article_id",
          source_id: obj.article_id,
          user_id,
        },
        true
      )
  ).then((res) => {
    if (res.result || res.result === 0) {
      console.log("sadsfasf" + JSON.stringify(res));
      check_praised.value = res.result ? true : false;
      add_praise(obj);
      console.log("点赞状态：", check_praised.value);
    } else if (res.error) {
      ElMessage.error(res.error.message);

      console.error(res.error);
    }
  });
};
/**
 * 添加点赞
 */
let add_praise = (obj) => {
  // get_praise(obj)
  let body = {
    source_table: "article",
    source_field: "article_id",
    source_id: obj.article_id,
    user_id,
  };
  obj.praise_len = parseInt(obj.praise_len);
  if (!check_praised.value) {
    check_praised.value = true;
    $post("/api/praise/add", body).then((res) => {
      if (res.result) {
        obj.praise_len += 1;
        let praise_len = obj.praise_len;
        $post("/api/article/set?article_id=" + obj["article_id"], {
          praise_len,
        }).then((res) => {
          if (res.result) {
            console.log("添加点赞数状态：", res.result);
          } else if (res.error) {
            console.error(res.error);
          }
        });
        ElMessage.success("点赞成功");
      } else if (res.error) {
        ElMessage.error(res.error.message);
      }
    });
  } else {
    check_praised.value = false;
    $get("/api/praise/del", body).then((res) => {
      if (res.result) {
        obj.praise_len -= 1;
        let praise_len = obj.praise_len;
        $post("/api/article/set?article_id=" + obj["article_id"], {
          praise_len,
        }).then((res) => {
          if (res.result) {
            console.log("取消点赞数状态：", res.result);
          } else if (res.error) {
            console.error(res.error);
          }
        });
        ElMessage.success("取消点赞");
      } else if (res.error) {
        ElMessage.error(res.error.message);
        console.error(res.error);
      }
    });
  }
};
/**
 * 添加收藏
 */
let add_collect = (obj) => {
  let { title, img, article_id } = obj;
  let body = {
    title,
    img,
    source_table: "article",
    source_field: "article_id",
    source_id: article_id,
    user_id,
  };
  if (!check_collected.value) {
    check_collected.value = true;
    $post("/api/collect/add", body).then((res) => {
      ElMessage.success("收藏成功");
    });
  } else {
    check_collected.value = false;
    $get("/api/collect/del", {
      user_id,
      source_id: article_id,
    }).then((res) => {
      ElMessage.success("取消收藏");
    });
  }
};
//获取收藏
let check_collect = (obj) => {
  let article_id = obj.article_id;
  $get("/api/collect/count", {
    user_id,
    source_table: "article",
    source_field: "article_id",
    source_id: article_id,
  }).then((res) => {
    check_collected.value = res.result;
    add_collect(obj);
  });
};
//  获取评分
//  添加评分
let add_Rate = (obj) => {};
onMounted(() => {
  // check_collect();
  // get_praise();
});
</script>

<style lang="less" scoped>
.list_home_module {
  width: 100%;
  border-radius: 0.5rem;
  background-color: rgb(236 242 248);
  padding: 0 !important;
  margin: 1rem 2rem;
}
// p::before {
//   content: "前缀：";
// }
// .Search::before {

//   content: "前缀：";
//   display: block; /* 使伪元素成为块级元素 */
//   width: 250px;
// color: red; /* 文本颜色 */
// font-size: 14px; /* 字体大小 */
// margin-bottom: 10px; /* 下边距 */
// }

.modules {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  // height: 320px;
  .modules_img {
    position: relative;
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      border-radius: 0.5rem;
      object-fit: cover;
    }
    .action_bar {
      text-align: center;
      color: white;
      width: 100%;
      position: absolute;
      bottom: 5px;
    }
  }
  .modules_content {
    flex: 1;
    padding-left: 10px;
    .el-button--small.is-round {
      padding: 2px 2px;
    }
    .el-button--small {
      font-size: 10px;
    }
    .desc_btn {
      margin-top: 5px;
    }
    .modules_title p {
      font-size: 12px;
      line-height: 1.5rem;
      color: rgb(111 109 109);
    }
  }
}
</style>
